<%= render 'spree/admin/shared/page_section_image', f: f %>
<div class="py-2">
  <%= f.fields_for :link do |lf| %>
    <div class="form-group">
      <%= lf.label :linkable_type, 'Link' %>
      <%= lf.select :linkable_type, @page_section.allowed_linkable_types, { include_blank: false }, { class: 'custom-select mb-3', data: { action: 'auto-submit#submit' } } %>
      <div id="linkable_type_dropdown">
        <%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: lf.object, form_name: 'page_section[link_attributes]' %>
      </div>
    </div>
    <div class="pb-2 custom-control custom-checkbox">
      <%= lf.check_box :open_in_new_tab, class: 'custom-control-input', data: { action: 'auto-submit#submit' } %>
      <%= lf.label :open_in_new_tab, class: 'custom-control-label' %>
      <span class="mt-2 text-muted form-text"><%= Spree.t('admin.page_builder.image_click_hint') %></span>
    </div>
  <% end %>
</div>
<% content_for(:design_tab) do %>
  <div class="form-group">
    <%= f.label :preferred_desktop_image_alignment, Spree.t('admin.page_builder.desktop_image_alignment') %>
    <%= f.select :preferred_desktop_image_alignment, options_for_select(['left', 'right'], @page_section.preferred_desktop_image_alignment), {  }, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
  </div>
  <div class="form-group">
    <%= f.label :preferred_vertical_alignment, Spree.t('admin.page_builder.vertical_alignment') %>
    <%= f.select :preferred_vertical_alignment, options_for_select([:top, :middle, :bottom], @page_section.preferred_vertical_alignment), {  }, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
  </div>
  <hr />
<% end %>
